import React, { useEffect, useState } from 'react'
import './List.css'
import { useNavigate } from 'react-router-dom'
import { LeftOutline } from 'antd-mobile-icons'
import { getListy } from '../../request/index'

const imge = require('../../assents/23.png')
const List = () => {
    const navigate = useNavigate()
    const tz = (id: any) => {
        navigate('/Xq/' + id)
    }

    const [list, setlist] = useState<any>([])

    useEffect(() => {
        getListy().then(res => {
            console.log(res);
            setlist(res.data.data)
        })
    }, [])

    return (
        <div>
            <div className='List-top'>
                <span className='List-ioc' onClick={() => { navigate(-1) }}><LeftOutline /></span>
                <span className='List-text'>更多</span>
            </div><br /><br />

            {
                list.map((item: any) => {
                    return (
                        <div className='List-list' onClick={() => tz(item.id)}>
                            <img className='images' src={item.imgPath} alt="" />
                            <div className='List-b'>
                                <span>{item.showName}</span><br />
                                <span>{item.showCity}</span><br />
                                <span>{item.showPrice}</span><br />
                                <span>{item.showDate}</span><br />
                                <span>{item.showDay}</span><br />
                                <span>{item.showDetail}</span>
                            </div>
                        </div>
                    )
                })
            }

        </div>
    )
}

export default List
